<template>
    <div class="flex both-center" style="height: 100vh">
        <div class="flex login-form-wraper">
            <div class="login-slider" style="background: #cccccc">
                <img class="img" src="@/assets/slider.png">
            </div>
            <div class="login-form">
                <h1 class="login-title">登录</h1>
                <el-input v-model="form.account" class="login-input" placeholder="账号"></el-input>
                <el-input v-model="form.password" type="password" class="login-input" placeholder="密码"></el-input>
                <el-button class="login-button" type="primary" style="width: 100%" @click="submit">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { login } from '@/api/login'
    export default {
        name: 'login',
        data () {
            return {
                form: {
                    account: '',
                    password: ''
                }
            }
        },
        methods: {
            submit () {
                if (this.form.account == '') {
                    this.$message.error('请填写账号')
                    return false
                }
                if (this.form.password == '') {
                    this.$message.error('请填写密码')
                    return false
                }

                login(this.form).then(res => {
                    if (res) {
                        // console.log(re)
                        window.sessionStorage.setItem('uuid', res.uuid);
                        this.form = {}
                        this.$router.push({
                            path: '/dashboard'
                        })
                        this.$message.success('欢迎回来!')
                    }
                })
            }
        }
    }
</script>

<style type="text/css" scoped>
	.login-form {
		width: 330px;
		background: #ffffff;
        padding: 40px 105px;
        height: 80%;
        text-align: center;
	}
    .login-title {
        margin-bottom: 80px;
        color: #409EFF;
    }
    .login-input {
        margin-bottom: 40px;

    }
    .login-form-wraper {
        justify-content: center;
        align-items: center;
        height: 35rem;
        width: 60rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05);
        /*transform: translate(-50%, -50%);*/
    }
    .login-slider {
        height: 100%;
        flex: 1;
    }
    .img {
        width: 100%;
        height: 100%;
    }
</style>